<template>
  <n-space
    vertical
    size="small"
    style="margin: 0px; padding: 0px"
    content-style="padding: 0px; margin:0px;"
  >
    <n-layout
      style="padding: 0px; margin: 0px"
      content-style="padding: 0px; margin:0px;"
    >
      <VGHeader />
      <n-layout has-sider>
        <VGSider />
        <VGContent />
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script>
// @ is an alias to /src
//import { ref } from "vue";
import VGHeader from "../components/VGHeader.vue";
import VGSider from "../components/VGSider.vue";
import VGContent from "../components/VGContent.vue";
//import VGFooter from "../components/VGFooter.vue";
//import useDynamicHeight from "../composables/useDynamicHeight";
//import Constants from "../contants";
export default {
  name: "Home",
  components: {
    VGHeader,
    VGSider,
    VGContent,
  },
  setup() {
    //const contentHeight = ref(200);
    //const bottomTop = ref(0);
    //const titleBarHeight = ref(Constants.TITLE_BAR_HEIGHT);

    //const { innerHeight, innerWidth } = useDynamicHeight();

    // onMounted(() => {
    //   contentHeight.value = Constants.calcContentHeight();
    //   bottomTop.value = Constants.calcBottomTop();
    //   window.onresize = () => {
    //     return (() => {
    //       contentHeight.value = Constants.calcContentHeight();
    //       bottomTop.value = Constants.calcBottomTop();
    //     })();
    //   };
    // });

    return {
      //innerHeight,
      //innerWidth,
    };
  },
};
</script>

<style lang="scss"></style>
